<script setup lang="ts">
import { ref } from 'vue'
import gzh from '@/static/images/qrcode_gh.jpg'

function open() {
  popup.value?.open()
}
function close() {
  popup.value?.close()
}
const popup = ref<{
  open: () => void
  close: () => void
}>()
const props = defineProps<{
  flag?: boolean
  url?: string
}>()
defineExpose({
  open,
  close,
})
</script>

<template>
  <uni-popup ref="popup" type="center">
    <view class="BjsActivityPopup">
      <view class="text_1">{{ props.flag === false ? '关注微信客服' : '关注微信公众号' }}</view>
      <view class="text_2">优惠信息早知道</view>
      <image
        class="popupImage"
        :src="props.url || gzh"
        mode="scaleToFill"
        :show-menu-by-longpress="true"
      />
      <button class="button_">长按识别二维码</button>
    </view>
    <view class="iconfont icon_Frame-1" @tap="popup?.close()"></view>
  </uni-popup>
</template>

<style lang="scss">
.BjsActivityPopup {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 110rpx;
  border-radius: 16rpx;
  background-color: #fff;
  z-index: 999;
  .popupImage {
    width: 280rpx;
    height: 280rpx;
    border: 1px solid #000;
    border-radius: 16rpx;
    margin: 24rpx 0 50rpx 0;
  }
  .text_1 {
    font-size: 40rpx;
    margin-bottom: 10rpx;
  }
  .text_2 {
    color: $uni-color-motif;
    font-size: 30rpx;
  }
  .button_ {
    height: 56rpx;
    line-height: 56rpx;
    font-size: 26rpx;
    color: #fff;
    border-radius: 44rpx;
    background: $uni-color-motif;
  }
}
.iconfont {
  text-align: center;
  margin-top: 32rpx;
  font-size: 64rpx;
  color: #fff;
}
</style>
